<template>
  <div class="unboxingDetail">
    <Header @showMenu="showMn = true" />
    <div class="ubody">
      <div class="page-nav">
        <div class="back-content" @click.stop="goBack">
          <span class="icon iconfont back">&#xe6dc;</span>
        </div>
        <div class="user-avatar">
          <img
            style="height: 30px; border-radius: 50%"
            :src="data.user && data.user.avatar"
            alt=""
          />
        </div>
        <div class="name">{{ data.user && data.user.nickName }}</div>
        <div class="nav-btn" @click.stop="showShare = true">
          <span class="icon iconfont share">&#xe67d;</span>
        </div>
      </div>
      <div class="bd-img" @click.stop="previewImage">
        <van-swipe :autoplay="1500">
          <van-swipe-item
            v-for="(image, index) in data.pictureList"
            :key="index"
          >
            <img v-lazy="image.url" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="detail-info">
        <div class="detail-title">
          {{ data.title }}
        </div>
        <div class="detail-text">
          <span> {{ data.content }}</span>
        </div>
        <div class="box-content">
          <img :src="data.goods && data.goods.img" draggable="false" />
          <div>
            <div class="box-name">{{ data.goods && data.goods.name }}</div>
            <div class="box-price">$ {{ data.goods && data.goods.price }}</div>
          </div>
        </div>
        <div class="detail-time">
          {{ $t("releaseTime") }}: {{ data.createTime }}
        </div>
      </div>
      <div class="comment-title">3 {{ $t("comments") }}</div>

      <div class="comment-content" @click.stop="showInput = true">
        <div class="comment-top-content">
          <img
            src="https://img.fcgbox.com/heads/6.webp"
            class="ava"
            draggable="false"
          />
          <div class="comment-top-text">{{ $t("LetMeAayAFewWords") }}</div>
          <img
            :src="'static/img/unboxingDetail/pl.png'"
            class="edit"
            draggable="false"
          />
        </div>
      </div>

      <div class="comment-list">
        <div
          class="comment-row"
          v-for="(item, index) in data.child"
          :key="index"
        >
          <img
            class="comment-avatar"
            :src="'https://www.namele.com' + item.user.avatar"
            draggable="false"
          />
          <div class="comment-content pt-20">
            <div class="comment-user-name">
              {{ item.user && item.user.nickName }}
            </div>
            <div class="comment-text">
              <span>{{ item.content }}</span>
            </div>
            <div
              class="u-album"
              v-for="pics in item.pictureList || []"
              :key="pics.id"
            >
              <div forcomputeduse="180" class="u-album__row">
                <div
                  class="u-album__row__wrapper"
                  style="margin-right: 0px; margin-bottom: 0px"
                >
                  <img
                    style="width: 180px; height: 180px"
                    :src="'https://www.namele.com' + pics.url"
                    draggable="false"
                  />
                </div>
              </div>
            </div>
            <!---->
            <div class="comment-time">{{ item.createTime }}</div>
          </div>
          <div class="comment-num" @click="doLike(item)">
            <span class="icon iconfont">&#xe7c8;</span>
            <span>{{ item.likeCount }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <van-uploader
        :after-read="afterRead"
        v-if="showInput"
        class="picsList"
        v-model="fileList"
        multiple
      />
      <div
        v-if="!showInput"
        @click.stop="showInput = true"
        class="bottom-input-content"
      >
        <img
          class="pl-icon"
          :src="'static/img/unboxingDetail/pl.png'"
          draggable="false"
        /><span>{{ $t("LetMeAayAFewWords") }}</span>
      </div>
      <div class="icon-item" v-if="!showInput">
        <span class="icon iconfont">&#xe7c8;</span><span class="label">19</span>
      </div>
      <div class="icon-item" v-if="!showInput" @click.stop="showShare = true">
        <span class="icon iconfont">&#xe67d;</span>
      </div>
      <div v-if="showInput" class="bottom-input-content bottom-input-body">
        <div class="uni-textarea-wrapper">
          <!-- <div
            class="uni-textarea-placeholder input-placeholder ipt"
            contenteditable="true"
            :placeholder="$t('pleaseEnteAText')"
           
          ></div> -->
          <van-field
            v-model="form.content"
            :placeholder="$t('pleaseEnteAText')"
          />
        </div>
      </div>
      <div v-if="showInput" class="send-btn" @click="postReviews">
        {{ $t("SEND") }}
      </div>

      <!-- <van-uploader :after-read="afterRead" v-if="showInput">
        <div class="icon-item d1">
          <span class="icon iconfont">&#xe7de;</span>
        </div>
      </van-uploader> -->

      <div class="icon-item d2" v-if="showInput">
        <span class="icon iconfont" @click.stop="showInput = false"
          >&#xe844;</span
        >
      </div>
    </div>
    <Menu :showMenu="showMn" @closeMenu="showMn = false" />
    <van-popup v-model="showShare" class="showShare"
      ><div class="close-content" @click.stop="showShare = false">
        <span class="icon iconfont close">&#xe748;</span>
      </div>
      <a
        @click="share(`mailto:?subject=dedewdwed&amp;body=` + url)"
        href="javascript:void(0)"
        class="share-item share-network-email"
        style="background-color: rgb(91, 192, 246)"
        ><div class="shar-icon">
          <span class="icon iconfont">&#xe74f;</span>
        </div>
        <div class="shar-name">Email</div></a
      >
      <a
        @click="
          share(
            `https://www.facebook.com/sharer/sharer.php?quote=dedewdwed&amp;u=` +
              url
          )
        "
        href="javascript:void(0)"
        class="share-item share-network-email"
        style="background-color: rgb(24, 119, 242)"
        ><div class="shar-icon">
          <span class="icon iconfont">&#xe620;</span>
        </div>
        <div class="shar-name">Facebook</div></a
      >
      <a
        @click="share(`sms:?body=dedewdwed+` + url)"
        href="javascript:void(0)"
        class="share-item share-network-email"
        style="background-color: rgb(125, 232, 119)"
        ><div class="shar-icon">
          <span class="icon iconfont">&#xec36;</span>
        </div>
        <div class="shar-name">SMS</div></a
      >
      <a
        @click="share(`http://twitter.com/share?text=dedewdwed&amp;url=` + url)"
        href="javascript:void(0)"
        class="share-item share-network-email"
        style="background-color: rgb(29, 161, 242)"
        ><div class="shar-icon">
          <span class="icon iconfont">&#xe882;</span>
        </div>
        <div class="shar-name">Twitter</div></a
      >
    </van-popup>
  </div>
</template>
  
  <script>
import { ImagePreview } from "vant";
import { mapState, mapMutations } from "vuex";
import Header from "../../components/head/header.vue";
import Menu from "../../components/menu";
export default {
  data() {
    return {
      reviews: [],
      fileList: [],
      FormDatas: [],
      form: {
        urlId: 0,
        ids: [],
        content: "",
      },
      showShare: false,

      showMn: false,
      showInput: false,
      data: {
        user: {},
        goods: {},
        pictureList: [],
      },
    };
  },
  components: {
    Header,
    Menu,
  },
  computed: {
    url() {
      return window.location.href;
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    share(url) {
      // window.open(url)
      let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

      open(url, "test", params);
    },

    menuClick(index) {
      this.isActive = index;
    },
    goBack() {
      this.$router.go(-1);
    },

    afterRead(file) {
      console.log(file);

      if (Array.isArray(file)) {
        file.forEach((f) => {
          let param = new FormData();
          param.append(f.file.name, f.file);
          this.FormDatas.push(param);
        });
      } else {
        let param = new FormData();
        param.append(file.file.name, file.file);
        this.FormDatas.push(param);
      }
    },
    async uploadImage() {
      let rets = await Promise.all(
        this.FormDatas.map((param) => {
          let config = {
            Headers: { "Content-Type": "multipart/form-data" },
          };
          return this.$http.post(`api/v1/picture`, param, config);
        })
      );
      for (let index = 0; index < rets.length; index++) {
        const res = rets[index];

        if (res.data && res.data.isSuccess) {
          if (res.data.resultData.length) {
            this.form.ids = [
              ...this.form.ids,
              { id: res.data.resultData[0].id },
            ];
            // this.pictureList = ['https://www.namele.com'+res.data.resultData[0].url]
            // this.postReviews();
          }
        }
      }

      this.FormDatas = [];
      this.fileList = [];
    },
    doLike(item) {
      this.$http
        .put(`api/v1/reviews/like/` + item.id)
        .then(async (res) => {
          this._dismissLoading();
          if (res.data && res.data.isSuccess) {
            this.getData();
          }
        })
        .catch((err) => {
          this._dismissLoading();
          this._showToast(err.message);
        });
    },
    async postReviews() {
      this._showLoading();
      await this.uploadImage();
      if (this.form.content == "") {
        this._showToast("请输入内容");
      }
      this.$http
        .post(`api/v1/reviews`, {
          // id:this.data.id,
          pid: this.data.id,
          // gid:  this.data.gid,
          title: this.data.title,
          content: this.form.content,

          isShow: true,
          pictureList: this.form.ids,
        })
        .then(async (res) => {
          this._dismissLoading();
          if (res.data && res.data.isSuccess) {
            this.form.ids = [];
            this.form.content=""
            this._dismissLoading();
            this.getData();
          }
        })
        .catch((err) => {
          this._dismissLoading();
          this._showToast(err.message);
        });
    },

    previewImage() {
      ImagePreview(this.data.pictureList.map((m) => m.url));
    },
    getData() {
      this._showLoading();
      this.$http
        .get(`api/v1/reviews/${this.$route.query.id}`)
        .then(async (res) => {
          this._dismissLoading();
          if (res.data && res.data.isSuccess) {
            if (res.data.resultData.length) {
              this.data = res.data.resultData[0];
              this.reviews = res.data.resultData;
            }
          }
        })
        .catch((err) => {
          this._dismissLoading();
          this._showToast(err.message);
        });
    },
  },
};
</script>

  
  <style scoped lang="less">
.unboxingDetail {
  //background: black;

  .ubody {
    margin-top: 95px;
    padding-bottom: 66px;
    background-color: var(--main-bc-color);
    .page-nav {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-right: 6px;
      padding-left: 0;
      box-sizing: border-box;
      background-color: var(--main-bc-color);
      .back-content {
        width: 54px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .back {
          color: var(--text-color);
          font-size: 27px;
        }
      }
      .user-avatar {
        width: 30px;
        height: 30px;
        border-radius: 100%;
        margin-right: 8px;
      }
      .name {
        font-size: 13px;
        color: var(--text-color);
      }
      .nav-btn {
        margin-left: auto;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        .share {
          flex-direction: row;
          align-items: center;
          color: var(--text-color);
          font-size: 26px;
        }
      }
    }
    .bd-img {
      background-color: var(--unboxing-im-bc);
      height: 375px;
      border-radius: 4px;
    }
    .detail-info {
      width: 100%;
      padding: 12px;
      box-sizing: border-box;
      .detail-title {
        font-size: 19px;
        font-weight: 400;
        margin-bottom: 10px;
        color: var(--text-color);
      }
      .detail-text {
        color: #999;
        font-size: 14px;
        margin-bottom: 10px;
      }
      .box-content {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        background-color: var(--content-bc);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 4px;
        border: 0.5px solid #999;
        color: var(--text-color);
        img {
          height: 60px;
          margin-right: 10px;
        }
        .box-name {
          font-size: 16px;
        }
        .box-price {
          font-size: 16px;
          color: #00dcab;
        }
      }
      .detail-time {
        color: #999;
        font-size: 12px;
        margin-top: 10px;
      }
    }
    .comment-title {
      padding: 10px 12px;
      font-size: 16px;
      font-weight: 500;
      color: var(--text-color);
    }
    .comment-content {
      padding: 10px 12px;
      .comment-top-content {
        width: 100%;
        height: 44px;
        border-radius: 44px;
        background-color: var(--content-bc);
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .ava {
        width: 44px;
        height: 44px;
        border-radius: 100%;
        margin-right: 10px;
      }
      .comment-top-text {
        opacity: 0.65;
        color: var(--text-color);
      }
      .edit {
        margin-left: auto;
        width: 22px;
        height: 22px;
        margin-right: 15px;
      }
    }

    .u-album {
      display: flex;
      flex-direction: column;
    }
    .u-album__row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .comment-list {
      padding: 10px 12px;
      .comment-row {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 10px;
        .comment-avatar {
          width: 44px;
          height: 44px;
          border-radius: 100%;
          margin-right: 10px;
        }
        .comment-content {
          flex: 1;
          .comment-user-name {
            font-size: 14px;
            color: #999;
            font-weight: 500;
            margin-bottom: 8px;
          }
          .comment-text {
            font-size: 14px;
            margin-bottom: 8px;
            color: var(--text-color);
          }
          .comment-time {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
    .pt-20 {
      padding-top: 10px;
    }
  }
  .footer {
    .picsList {
      position: absolute;
      bottom: 54px;
    }
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    min-height: 66px;
    padding: 0 16px;
    padding-right: 0;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: var(--main-bc-color);
    border-top: 1px solid var(--main-bc-opacity);
    .bottom-input-content {
      background: var(--content-bc);
      width: 260px;
      min-height: 42px;
      border-radius: 4px;
      padding: 0 10px;
      box-sizing: border-box;
      color: #999;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
      margin-right: 10px;
      .pl-icon {
        width: 22px;
        height: 22px;
        margin-right: 15px;
      }
    }
    .icon-item {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .label {
        color: rgb(96, 98, 102);
        font-size: 12px;
        margin: 0px 0px 0px 3px;
      }
      .icon {
        font-size: 20px;
        line-height: 20px;
        font-weight: normal;
        top: 0px;
        color: rgb(153, 153, 153);
      }
    }

    .bottom-input-body {
      width: 215px;
    }
    .bottom-input-content {
      background: var(--content-bc);
      width: 215px;
      min-height: 42px;
      border-radius: 4px;
      padding: 0 10px;
      box-sizing: border-box;
      color: #999;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
      margin-right: 10px;
      .uni-textarea-wrapper {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        min-height: inherit;
        .uni-textarea-placeholder {
          //   color: grey;
          color: var(--text-color);
          overflow: hidden;
          padding: 0 10px;
          line-height: 18px;
        }

        .ipt:empty:before {
          content: attr(placeholder);
        }
        .ipt:focus:before {
          content: none;
        }
        .ipt:focus {
          border: none;
          outline: none;
        }
      }
    }
    .send-btn {
      width: 70px;
      height: 36px;
      font-size: 12px;
      background-color: #00dcab;
      color: #fff;
      font-weight: 500;
      text-align: center;
      line-height: 36px;
      border-radius: 4px;
      margin-right: 10px;
    }
  }

  .showShare {
    width: 382px;
    padding: 20px;
    padding-top: 61px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--content-bc);
    border-radius: 10px;
    // position: relative;
    .close-content {
      position: absolute;
      top: 13px;
      right: 13px;
      opacity: 0.7;
      font-weight: 600;
      /* color: red; */
      font-size: 24px;
      color: var(--text-color);
      .close {
        font-size: 24px;
      }
    }

    .share-item {
      width: 100%;
      height: 60px;
      margin-bottom: 13px;
      text-decoration: none;
      color: var(--text-color);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #fff;
      border-radius: 8px;
      overflow: hidden;
      .shar-icon {
        width: 60px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.2);
        .icon {
          font-size: 38px;
          line-height: 38px;
          font-weight: normal;
          top: 0px;
          color: rgb(255, 255, 255);
        }
      }
      .shar-name {
        margin-left: 13px;
      }
    }
  }
}
</style>
<style lang="less">
.van-swipe {
  height: 100%;
  width: 100vw;
}
.unboxingDetail {
  .van-uploader__upload {
    position: fixed !important;
    right: 42px;
    height: 20px;
    width: 20px;
    bottom: 13px;
  }
}
</style>